<template>
    <div class="content">
        <levelbar></levelbar>
        <TableLayout form-title="" >
        <!-- <div slot="form-title" class="table-title"></div> -->
            <el-form ref="form" :model="form" label-width="80px" slot="form" v-collapse="false">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="学校名称" prop="schoolName" :rules="schoolName">
                            <school v-model="form.schoolName" style="width:100%" @change='schoolChange'></school>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="打卡人">
                            <el-input v-model="form.clockPeople" placeholder="打卡人姓名" style="width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="考勤卡号">
                            <el-input v-model="form.attendanceNumber" placeholder="输入绑定考勤卡卡号" style="width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="设备定位">
                            <el-input v-model="form.eqqLocation" placeholder="输入设备定位" style="width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="打卡日期">
                            <start-date v-model="form.startDate" :clearable="false" :picker-options="form.pickerOptions1" :end-date-options.sync="form.pickerOptions2" :state="false"></start-date>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="至" >
                            <end-date v-model="form.endDate" :clearable="false" :picker-options="form.pickerOptions2" :start-date-options.sync="form.pickerOptions1" :state="false"></end-date>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="设备类型">
                            <el-select v-model="form.deviceType" placeholder="请选择" style="width:100%">
                                <el-option v-for="item in form.deviceTypeList" :key="item.pId" :label="item.sName" :value="item.sType"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="top-line">
                    <el-col :span="4" :offset="20"> 
                        <el-button type="primary" class="top-btn" @click="onSubmit('form')">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div class="table-title" slot="table-title"></div>
            <el-table :data="tableData" border style="width: 100%" v-loading="loading" ref="multipleTable">
                <el-table-column prop="schoolName" label="学校名称" align="center">
                    <template scope="scope">
                        {{!scope.row.schoolName ? '--' : scope.row.schoolName}}
                    </template>
                </el-table-column>
                <el-table-column prop="punchTime" label="打卡时间" align="center">
                    <template scope="scope">
                        {{!scope.row.punchTime ? '--' : scope.row.punchTime}}
                    </template>
                </el-table-column>
                <el-table-column prop="devicePosition" label="设备定位" align="center">
                    <template scope="scope">
                        {{!scope.row.devicePosition ? '--' : scope.row.devicePosition}}
                    </template>
                </el-table-column>
                <el-table-column prop="deviceType" label="设备类型" align="center">
                    <template scope="scope">
                        {{!scope.row.deviceType ? '--' : scope.row.deviceType}}
                    </template>
                </el-table-column>
                <el-table-column prop="exueCode" label="e学云ID号" align="center">
                    <template scope="scope">
                        {{!scope.row.exueCode ? '--' : scope.row.exueCode}}
                    </template>
                </el-table-column>
                <el-table-column prop="punch" label="打卡人" align="center">
                    <template scope="scope">
                        {{!scope.row.punch ? '--' : scope.row.punch}}
                    </template>
                </el-table-column>
                <el-table-column prop="attendanceCardNum" label="考勤卡号" align="center">
                    <template scope="scope">
                        {{!scope.row.attendanceCardNum ? '--' : scope.row.attendanceCardNum}}
                    </template>
                </el-table-column>
                <el-table-column prop="attendanceCardNum" label="考勤图片" align="center">
                    <template scope="scope">
                        <el-button v-if="scope.row.img" type="text" class="btn-success" @click="btnImg(1,scope.row.img)">查看</el-button>
                        <el-button v-else type="text" class="btn-success" @click="btnImg(2)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
            <imgDialog v-if="imgObj.dialogVisible" :imgObj="imgObj"></imgDialog>
        </TableLayout>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import TableLayout from 'components/TableLayout';
import school from 'components/SchoolClasss/school';
import startDate from 'components/Datepicker/startDate';
import endDate from 'components/Datepicker/endDate';
import imgDialog from './comps/imgDialog';
import { mapState, mapActions } from 'vuex';
import { listRawData, listDevice } from 'api/peaceAttendance';
export default {
    name: 'peaceAttendance',
    components: {
        Levelbar,
        TableLayout,
        startDate,
        endDate,
        school,
        imgDialog
    },
    data() {
        return {
            imgObj: {
                dialogVisible: false
            },
            form: {
                schoolList: [], // 学校数组
                schoolName: '', // 学校名称
                schoolId: '',
                clockPeopleList: [], // 打卡人数组
                clockPeople: '', // 打卡人
                attendanceNumber: '', // 考勤卡号
                eqqLocation: '', // 设备定位
                deviceType: '', // 设备类型
                deviceTypeList: [], // 设备类型数组
                startDate: '',
                endDate: '',
                pickerOptions1: {},
                pickerOptions2: {},
                tableData: []
            },
            timeout: null, // 开启定时器
            tableData: [],
            listQuery: {
        // 分页
                page: 1,
                total: 0
            },
            schoolName: [
        { required: true, message: '请输入学校名称', trigger: 'blur' }
            ],
            loading: false
        };
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        })
    },
    created() {
        this.initDate();
    },
    methods: {
    // 全局获取行数
        ...mapActions(['ChangePageSize']),
    // 分页
        handleSizeChange(val) {
            this.ChangePageSize(val);
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.listQuery.page = 1;
                    this.searchFetchData();
                }
            })
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.searchFetchData();
        },
        searchFetchData() {
      // tabel 数据
            this.loading = true;
            listRawData(
        this.form.schoolId,
        this.form.clockPeople,
        this.form.eqqLocation,
        this.form.attendanceNumber,
        this.fifterDate(this.form.startDate),
        this.fifterDate(this.form.endDate),
        this.form.deviceType,
        this.listQuery.page,
        this.config.pageSize
      )
        .then(data => {
            this.loading = false;
            this.tableData = data.data.content.list;
            this.listQuery.total = data.data.content.pagination.total;
        })
        .catch(Error => {
            this.loading = false;
        });
        },

    // 设置初始时间
        initDate() {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            this.form.startDate = start;
            this.form.endDate = end;

      // 获取设备类型
            listDevice().then(data => {
                this.form.deviceTypeList = data.data.content;
                this.form.deviceTypeList.unshift({ sName: '请选择' });
            });
        },
    // 学校模糊查询
        schoolChange(val) {
            this.form.schoolId = val;
        },
        createSchoolFilter(queryString) {
            return state => {
                state.value = state.schoolName;
                return state.value.indexOf(queryString.toLowerCase()) === 0;
            };
        },

    // 返回年月日时分秒
        fifterDate(date) {
            if (typeof date === 'string') {
                return date;
            } else {
                let month = this.addZero(date.getMonth() + 1 + '');
                let day = this.addZero(date.getDate() + '');
        // let hour = this.addZero(date.getHours() + '');
        // let minutes = this.addZero(date.getMinutes() + '');
        // let seconds = this.addZero(date.getSeconds() + '');
        // return `${date.getFullYear()}-${month}-${day} ${hour}:${minutes}:${seconds}`;
                return `${date.getFullYear()}-${month}-${day}`;
            }
        },
    // 补0
        addZero(str) {
            if (typeof str === 'string') {
                return str.length > 1 ? str : '0' + str;
            }
        },
        onSubmit(form) {
            this.$refs[form].validate(valid => {
                if (valid) {
                    this.listQuery.page = 1;
                    this.searchFetchData();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

    // 查看图片
        btnImg(num, val) {
            if (num == 1) {
                this.imgObj.img = val;
                this.imgObj.dialogVisible = true;
            } else {
                this.imgObj.img = '';
                this.imgObj.dialogVisible = true;
            }
        }
      
    },

    // 查看图片
    btnImg(val) {
        console.log(val)
        this.img = val;
        this.dialogVisible = true;
    }
};
</script>
<style lang="scss" scoped>
.content {
  position: relative;
  padding: 20px 20px 10px;
  $bgcolor: #fff;
  .el-tag {
    margin-left: 5px;
    background: #f9f9f9;
    color: #444;
  }
  .formBtn {
    width: 100%;
    height: 70px;
    border-top: 1px solid #dddddd;
    position: relative;
  }
  .btnPosition {
    position: absolute;
    right: 0px;
    top: 18px;
  }
  .btnPosition1 {
    font-size: 14px !important;
    color: #333;
    line-height: 35px;
  }
  .btnPositionLeft {
    position: absolute;
    left: 20px;
    top: 18px;
  }
  .footer {
    text-align: center;
    margin-top: 40px;
  }
  .footer .el-button {
    padding: 10px 40px;
  }
}
</style>